<script setup lang="ts">
import { useAppFooterRouteNames as names } from '~/config'

const route = useRoute()

const active = ref(0)

const show = computed(() => {
  if (route.name && names.includes(route.name))
    return true
  return false
})
const icon = {
  active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
  inactive:
    'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
};
</script>

<template>
  <van-tabbar v-if="show" v-model="active" route placeholder fixed active-color="#0c8bfe" inactive-color="#9aa8cc">
    <van-tabbar-item replace to="/">
      <span >{{ $t('tabbar.home') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/home.png' : '/img/home-un.png'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/activity">
      <span >{{ $t('tabbar.activity') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/activity.png' : '/img/activity-un.png'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/recharge">
      <span >{{ $t('tabbar.recharge') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/recharge.png' : '/img/recharge-un.png'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/custoService">
      <span >{{ $t('tabbar.custoService') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/service.png' : '/img/service-un.png'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/my">
      <span >{{ $t('tabbar.profile') }}</span>
      <template #icon="props">
        <img :src="props.active ? '/img/my.png' : '/img/my-un.png'" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<style lang="css" scoped>
::v-deep .van-tabbar {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  height: 62px;
}

::v-deep .van-tabbar-item--active {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

::v-deep .van-tabbar-item__text {
  font-size: 10px;
  margin-top: 3px;
}
</style>
